import React from 'react'
import Prolist from './prolist/Prolist'
import Category from './category/Category'
import Seckill from './seckill/Seckill'
import './home.scss'
import { TabBar } from 'antd-mobile'
import { Search } from 'react-vant';

import {
  AppOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import { useLocation, useNavigate } from 'react-router-dom'

export default function Home() {
  let location = useLocation();   //这个对象可以获取当前路由的路径（pathname)
  let navigate = useNavigate()  //这个对象可以进行编程式导航

  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/cart',
      title: '购物车',
      icon: <UnorderedListOutline />,
    },
    {
      key: localStorage.getItem("token") ? '/mine' : "/login",
      title: localStorage.getItem("token") ? '我的' : "登录",
      icon: <UserOutline />
    },
  ]
  return (
    <div >
      <div className='search'>
        <div className='search-left' style={{ width: '12%', height: '100%', lineHeight: '54px', backgroundColor: '#f00', color: '#fff', textAlign: 'center', fontSize: '16px' }} onClick={() => navigate('/address')}>地址</div>
        <Search
          showAction
          shape="round"
          background="#f00"
          placeholder="请输入搜索关键词"
          actionText={<div style={{ color: '#fff', fontSize: '16px' }} onClick={() => navigate(localStorage.getItem("token") ? '/mine' : "/login")}>{localStorage.getItem("token") ? '我的' : "登录"}</div>}
          style={{ width: '88%', height: '100%' }}
          onClickInput={() => navigate('/search')}
        />
      </div>

      <Category />
      <Seckill />
      <Prolist />
      <TabBar activeKey={location.pathname} onChange={(value) => navigate(value)} className='nav' >
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  )
}
